<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <div class="bg-gray-50 min-h-[1024px]">
        <navigation></navigation>
        <div class="max-w-[1440px] mx-auto p-8">
            <header class="flex justify-between items-center mb-8">
                <h1 class="text-2xl font-semibold">能力评估中心</h1>
            </header>
            <div class="dashboard-grid">
                <aside class="bg-white rounded-xl p-6 h-fit shadow-sm">
                    <div class="flex flex-col items-center mb-6">
                        <div class="w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
                            <img :src="userInfo.userImg" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="text-lg font-medium">{{ userInfo.userName }}</h3>
                        <p class="text-gray-500 text-sm">{{ userInfo.intendedPosition }}</p>
                    </div>
                    <div class="space-y-6">
                        <div>
                            <div>
                                <div class="text-sm text-gray-500 mb-2">完成评估</div>
                                <div class="text-2xl font-semibold">{{ completedCount }}/{{ totalSkills }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500 mb-2">平均得分</div>
                            <div class="text-2xl font-semibold text-primary">{{ averageScore }}</div>
                        </div>
                        <!-- 更新“评估进度” -->
                        <div>
                            <div class="text-sm text-gray-500 mb-3">评估进度</div>
                            <el-progress :percentage="progressPercentage" :show-text="false" class="progress-custom" />
                        </div>
                    </div>
                </aside>
                <main class="space-y-6 ">
                    <div class="bg-white rounded-xl p-6 border-2 shadow-sm border border-gray-200 ">
                        <div class="flex flex-col  lg:flex-row justify-between items-center mb-6 p-4 bg-cover bg-center" style="background-image: url(/src/assets/img/cepinbeijing.png)">
                            <div>
                                <h1 class="text-2xl text-gray-50 font-medium">专业技能评估</h1>
                                <h2 class="text-xl text-gray-100 mt-2" >专业技能评估是本项目中的一个重要功能，</h2>
                                <h3 class="text-xl text-gray-100 mt-2">旨在通过科学的测评方式，帮助学生全面</h3>
                                <h4 class="text-xl text-gray-100 mt-2">了解和提升自己的专业能力。</h4>

                            </div>
                            <div ref="skillRadarRef" class="w-full lg:w-1/2 h-72 lg:h-80"></div>
                        </div>

                        <div class="grid grid-cols-3 gap-4">
                            <div v-for="(skill, index) in professionalSkills" :key="index"
                                class="assessment-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h3 class="font-medium mb-1">{{ skill.name }}</h3>
                                        <div class="assessment-date"><p class="text-sm text-gray-500">上次评估时间: {{ formatDate(skill.lastAssessment) }}</p></div>
                                    <div class="assessment-score"><span class="text-lg font-semibold text-primary">上次评估分数：{{ skill.score }}分</span></div>
                                </div>
                                </div>
                                <el-button type="primary" class="w-full !rounded-button whitespace-nowrap"
                                    @click="toTopic('/assessmenttopic', skill.id)">开始评估</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 border-2 shadow-sm border border-gray-200">
                        <div class="flex flex-col  lg:flex-row justify-between items-center mb-6 p-4 bg-cover bg-center" style="background-image: url(/src/assets/img/cepinbeijing.png)">
                            <div>
                                <h1 class="text-xl text-gray-50 font-medium">三商综合评估</h1>
                               
                                <h2 class="text-xl text-gray-100 mt-2" >三商综合评估是一种多维度的评估方法，旨在全面、客观地评价个人或</h2>
                                <h3 class="text-xl text-gray-100 mt-2">组织在多个方面的能力和表现。三商通常指的是智商（IQ）、情商（EQ）</h3>
                                <h4 class="text-xl text-gray-100 mt-2">和逆商（AQ），这三个维度共同构成了一个人的综合能力。</h4>
                            </div>
                           <div ref="softSkillRadarRef" class="w-full lg:w-1/2 h-72 lg:h-80"></div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div v-for="(skill, index) in softSkills" :key="index"
                            class="assessment-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h3 class="font-medium mb-1">{{ skill.name }}</h3>
                                        <div class="assessment-date"><p class="text-sm text-gray-600">上次评估时间: {{ formatDate(skill.lastAssessment) }}</p></div>
                                    
                                    <div class="assessment-score"><span class="text-lg font-semibold text-primary">上次评估分数：{{ skill.score }}分</span></div>
                                </div>
                                </div>
                                <el-button type="primary" class="w-full rounded-lg"
                                    @click="toTopic('/assessmenttopic', skill.id)">开始评估</el-button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
</template>



<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import * as echarts from 'echarts';
import { ElButton, ElProgress } from 'element-plus';
import navigation from "../../views/navigation.vue";
import { getMajorQuestionBankList, getSoftSkillsQuestionBankList } from "../../api/student/assessementCenter/stuAssessement"; // 假设有方法获取软技能数据
import { getStudentBaseInfo } from '@/api/student/personCenter/stuPersonCenter';
import { useRoute, useRouter } from "vue-router";

// 日期格式化方法
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`; // 返回 yyyy-mm-dd 格式
};

const router = useRouter();
const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/7ee8d5a8ec5548feeb0225b12bac3576.jpg ';
const skillRadarRef = ref(null);
const softSkillRadarRef = ref(null);
let skillRadar = null;
let softSkillRadar = null;

// 响应式数据
const professionalSkills = ref([]);
const skillOption = ref({});
const softSkills = ref([]);
const softSkillOption = ref({});


//左上角计算
// 获取用户基本信息
// 用户信息
const userInfo = ref({
    userName: '',
    major: '',
    intendedPosition: '',
    userImg: '',
});
const fetchStudentInfo = async () => {
    try {
        const data = await getStudentBaseInfo();
        // 将用户数据映射到 userInfo 中
        userInfo.value = data;
    } catch (error) {
        ElMessage.error('用户信息获取失败，请稍后再试');
    }
};

// 动态计算值
const totalSkills = computed(() => professionalSkills.value.length); // 总数
const completedCount = computed(() => professionalSkills.value.filter(skill => skill.score > 0).length); // 已完成数目
const averageScore = computed(() => {
    const totalScore = professionalSkills.value.reduce((sum, skill) => sum + skill.score, 0);
    return totalSkills.value > 0 ? (totalScore / completedCount.value).toFixed(1) : 0; // 平均分
});
const progressPercentage = computed(() => ((completedCount.value / totalSkills.value) * 100).toFixed(0)); // 评估进度百分比
//左上角计算

// 默认雷达图配置（若后端数据未加载成功）
const defaultSkillOption = {
    animation: false,
    radar: {
        indicator: [
            { name: '产品设计', max: 100 },
            { name: '用户研究', max: 100 },
            { name: '数据分析', max: 100 },
            { name: '项目管理', max: 100 },
            { name: '战略思维', max: 100 },
            { name: '战略思维', max: 100 }
        ],
        radius: '60%',
        splitLine: { lineStyle: { color: '#E5E7EB' } },
        axisLine: { lineStyle: { color: '#E5E7EB' } },
        axisLabel: { color: '#0000FF' }
    },
    series: [{
        type: 'radar',
        data: [{
            value: [95, 88, 92, 85, 90, 90],
            name: '能力得分',
            areaStyle: { color: 'rgba(0, 102, 255, 0.2)' },
            lineStyle: { color: '#0066FF' },
            itemStyle: { color: '#0066FF' }
        }]
    }]
};

const defaultSoftSkillOption = {
    animation: false,
    radar: {
        indicator: [
            { name: '团队协作', max: 100 },
            { name: '沟通能力', max: 100 },
            { name: '领导力', max: 100 },
            { name: '问题解决', max: 100 },
            { name: '创新思维', max: 100 }
        ],
        radius: '60%',
        splitLine: { lineStyle: { color: '#E5E7EB' } },
        axisLine: { lineStyle: { color: '#E5E7EB' } },
        axisLabel: { color: '#0000FF' }
    },
    series: [{
        type: 'radar',
        data: [{
            value: [90, 85, 88, 92, 87],
            name: '能力得分',
            areaStyle: { color: 'rgba(0, 102, 255, 0.2)' },
            lineStyle: { color: '#0066FF' },
            itemStyle: { color: '#0066FF' }
        }]
    }]
};

// 雷达图配置生成函数
function updateSkillOption() {
    if (professionalSkills.value.length === 0) return;

    const indicators = professionalSkills.value.map(skill => ({
        name: skill.name,
        max: 100
    }));

    const values = professionalSkills.value.map(skill => skill.score);

    skillOption.value = {
        animation: false,
        radar: {
            indicator: indicators,
            radius: '60%',
            splitLine: { lineStyle: { color: '#E5E7EB' } },
            axisLine: { lineStyle: { color: '#E5E7EB' } },
            axisLabel: { color: '#0000FF' }
        },
        series: [{
            type: 'radar',
            data: [{
                value: values,
                name: '能力得分',
                areaStyle: { color: 'rgba(0, 102, 255, 0.2)' },
                lineStyle: { color: '#0066FF' },
                itemStyle: { color: '#0066FF' }
            }]
        }]
    };
}

function updateSoftSkillOption() {
    if (softSkills.value.length === 0) return;

    const indicators = softSkills.value.map(skill => ({
        name: skill.name,
        max: 100
    }));

    const values = softSkills.value.map(skill => skill.score);

    softSkillOption.value = {
        animation: false,
        radar: {
            indicator: indicators,
            radius: '60%',
            splitLine: { lineStyle: { color: '#E5E7EB' } },
            axisLine: { lineStyle: { color: '#E5E7EB' } },
            axisLabel: { color: '#0000FF' }
        },
        series: [{
            type: 'radar',
            data: [{
                value: values,
                name: '能力得分',
                areaStyle: { color: 'rgba(0, 102, 255, 0.2)' },
                lineStyle: { color: '#0066FF' },
                itemStyle: { color: '#0066FF' }
            }]
        }]
    };
}

// 页面加载时获取数据
onMounted(async () => {
    //查询用户基本信息
    fetchStudentInfo();

    try {
        // 获取专业技能数据
        const professionalData = await getMajorQuestionBankList();
        console.log("res:", professionalData)
        professionalSkills.value = professionalData;
        updateSkillOption(); // 生成专业技能雷达图配置

        // 获取软技能数据
        const softSkillData = await getSoftSkillsQuestionBankList();
        softSkills.value = softSkillData;
        updateSoftSkillOption(); // 生成软技能雷达图配置
    } catch (error) {
        console.error('获取数据失败:', error);
        // 使用默认雷达图配置
        skillOption.value = defaultSkillOption;
        softSkillOption.value = defaultSoftSkillOption;
    }

    // 初始化雷达图
    if (skillRadarRef.value && softSkillRadarRef.value) {
        skillRadar = echarts.init(skillRadarRef.value);
        softSkillRadar = echarts.init(softSkillRadarRef.value);
        skillRadar.setOption(skillOption.value);
        softSkillRadar.setOption(softSkillOption.value);
    }

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);
});

// 窗口大小变化时重新绘制图表
const handleResize = () => {
    skillRadar?.resize();
    softSkillRadar?.resize();
};

// 清理操作
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    skillRadar?.dispose();
    softSkillRadar?.dispose();
});

//跳转测评页面
function toTopic(path, questionBankId) {
    router.push({
        path: path,
        query: {
            questionBankId: questionBankId // 传递题库 ID
        }
    });
}
</script>

<style scoped>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        margin: 0;
        background-color: #f5f5f5;
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
    .card-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        }
    .assessment-card {
        width: 280px;
        /* height: 300px;     */
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 24px;
        background-color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        text-align: center;
        
        }
    .assessment-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
        }
    .assessment-date {
        color: #666;
        font-size: 14px;
        margin-bottom: 24px;
        text-align: center;
        }
    .assessment-score {
        font-size: 16px;
        font-weight: 700;
        margin: 10px 0;
        color: #2c3e50;
        text-align: center;
        }
    .start-button {
        width: 100%;
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        }
    .start-button:hover {
        background-color: #3e8e41;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .dashboard-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

.radar-chart {
    width: 80%;
    height: 300px;
}

.assessment-card {
    transition: transform 0.2s;
}

.assessment-card:hover {
    transform: translateY(-2px);
}
.flex1 {
    width:970px;
}

:deep(.progress-custom .el-progress-bar__outer) {
    background-color: #f3f4f6;
    height: 8px !important;
    border-radius: 9999px;
}

:deep(.progress-custom .el-progress-bar__inner) {
    background-color: #0066FF;
    border-radius: 9999px;
}
</style>

